@font-face {
  font-family: "bootstrap-icons";
  src: url("/css/bootstrap/fonts/bootstrap-icons.woff2") format("woff2"), url("/css/bootstrap/fonts/bootstrap-icons.woff") format("woff");
}
:root{
    --slog-scroll-width: 3px;
    --slog-crumbs-height:0px;
    --slog-footer-height:50px;
    --arrow-size : 1.2em;
    --widget-icon-size: 16px;
    --widget-tool-height: 40px;
}
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-search::before { content: "\f52a"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-gear::before { content: "\f3e5"; }
.bi-list::before { content: "\f479"; }
.bi-layers-half::before { content: "\f45a"; }
.bi-x::before { content: "\f62a"; }
.bi-patch-question::before { content: "\f4be"; }
.bi-plus::before { content: "\f4fe"; }
.bi-three-dots-vertical::before { content: "\f5d3"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-arrow-down::before { content: "\f128"; }

.bi-magnet-fill::before { content: "\F778"; }
.bi-trash3-fill::before { content: "\F78A"; }
.bi-layer-backward::before { content: "\F457"; }
.bi-layer-forward::before { content: "\F458"; }
.bi-x-lg::before { content:"\F659"; }
.bi-arrow-up-circle-fill::before { content:"\F139";transform: scale(1.5);cursor: pointer }
.bi-grip-vertical::before { content:"\F3FE"; }


.slog-shadow-right {
    box-shadow: 0 0px 0em rgb(0 0 0 / 20%), 0 0px 1em rgb(0 0 0 / 17%);
}

.slog-shadow-bottom{
    box-shadow: 0 .5em 1.5em rgba(0.4, 0.4, 0.4, 0.204), 0 .125em .5em rgba(0.4, 0.4, 0.4, 0.166);
}

.tree li a:hover {
    color: red;
    text-shadow: none;
    background-color: lightseagreen;
    border-bottom: none
}

.scroll-vertical {
    overflow-y: auto;
    overflow-x: hidden;
}
.scroll-horizontal {
    overflow-y: hidden;
    overflow-x: auto;
}

.scroll::-webkit-scrollbar {
    width: var(--slog-scroll-width);
    height: var(--slog-scroll-width);
}

.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(3, 77, 236, 0.4);
}
.scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(3, 77, 236, 0.8);
}

.scroll::-webkit-scrollbar-track:visible {
    background-color: rgba(255, 255, 0, 1);
}
/*
.scroll::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 1);
}
.scroll::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, 1);
}
*/

/**
================================================================================
cell-phone
*/
.bd-subnavbar {
    display:block;
    position: relative;
    z-index: 1020;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.15)
}

.grid-main-handy-action{
    grid-area: main-handy-action;
}

.grid-main-handy-toc{
    grid-area: main-handy-toc;
}

.grid-layout {
    display: grid;
    grid-template-areas: "sidebar" "crumbs" "main" "footer";
    grid-template-columns: auto;
    grid-template-rows: auto var(--slog-crumbs-height) 1fr 50px;
}
.grid-footer {
    color: #63707c;
    grid-area: footer;
}
@media (min-width: 768px) {
    .grid-layout {
        grid-template-areas: "sidebar crumbs" "sidebar main" "sidebar footer";
        grid-template-columns: auto 1fr;
        grid-template-rows: var(--slog-crumbs-height) auto 100px;

    }
}
.scroll-with-bg::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 1);
}
#ID_sidebar_menu a.nav-link{
    color: #FFFFFF;
}
#ID_sidebar_menu a.nav-link:hover{
    color: #0a58ca;
}
a.slog-list-group-item {
    border-width: 0;
    display: block;
    position: relative;
    padding: .2rem 0.5rem;
    color: #212529;
    text-decoration: none;
}
a.slog-list-group-item.active {
    z-index: 2;
    color: #ffffff;
    font-weight:600;
    background-color: #0d6efd;
}
a.slog-list-group-item:not(a.slog-list-group-item.active):hover {
    z-index: 1;
    color: #0d6efd;
}
.slog-expand-arrow[aria-expanded="true"]{
    transform: rotate(90deg);
}
.slog-expand-arrow{
    width: var(--arrow-size);
    height: var(--arrow-size);
    min-width: var(--arrow-size);
    min-height: var(--arrow-size);
    line-height: 0;
    transition: transform 0.35s ease;
    transform-origin: calc( --arrow-size * 0.5) calc( --arrow-size * 0.5);
}
.slog-expand-arrow:hover {
    z-index: 1;
    background-color: #0d6efd;
    border-radius: 1em;
}

#ID_sidebar {
    grid-area: sidebar;
    width: 400px;
    display: grid;
    grid-template-areas: "sidebar-menu sidebar-content";
    grid-template-columns: auto 1fr;
}

#ID_sidebar_menu{
    grid-area: sidebar-menu;
    background-image: linear-gradient(black, gray);
}
#ID_sidebar_content{
    grid-area: sidebar-content
}
h2.accordion-header{
    font-weight: bold;
}
div.accordion-button{
    color: #0c63e4;
}
div.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: white;
    box-shadow: none;
}
div.accordion-item {
    background-color: #fff;
    border:none;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

@media (min-width: 768px) {
    #ID_sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        height: 100vh
    }
    #ID_sidebar_menu >ul{
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
    }
}
#ID_main {
    grid-area: main;
    display: grid;
    grid-template-areas: "main-summary" "main-toc" "main-content";
    grid-template-rows: auto auto 1fr;
    margin: 40px 0 0 0;
}
#ID_main_summary{
    grid-area:main-summary;
    padding:0 calc(var(--widget-icon-size) * 2.5) 0 calc(var(--widget-icon-size) * 2.5);
}

#ID_main_toc{
    grid-area: main-toc;
    /*height:fit-content;*/
}

#ID_main_content{
    grid-area: main-content;
    min-width: 100px;
    padding: 1.5em 0 0 0;
    margin:0 calc(var(--widget-icon-size) * 2.5) 50px calc(var(--widget-icon-size) * 2.5);
}

@media (min-width: 768px) {
    #ID_main {
        grid-template-areas: "main-summary main-toc" "main-content main-toc";
        grid-template-rows: auto 1fr;
        grid-template-columns: auto 0px;
    }
    #ID_main_toc{
        position: -webkit-sticky;
        position: sticky;
        top: var(--slog-crumbs-height);
        right: 0;
        z-index: 2;
        height:calc(100vh - var(--slog-crumbs-height) - 50px);
    }
}
@media (min-width: 992px) {
}
section{
    position:relative;
    width:100%;
    padding: 1em calc(var(--widget-icon-size) * 1.5) 1em calc(var(--widget-icon-size) * 1.5);
}
.slog_section_left{
    height:100%;
    width: calc(var(--widget-icon-size) * 2);
}
.slog_section_right{
    height:100%;
    width: calc(100% - var(--widget-icon-size) * 2 - 8px);
    position: relative;
}
.slog_full_percent{
    height:100%;
    width:100%;
}
.slog_half_width{
    width:50%;
    min-width:50%;
    max-width:50%;
}
.slog_full_width{
    width:100%;
    min-width:100%;
    max-width:100%;
}
.slog-editor{
    border:none;
    outline:none;
    background-color:ivory;
    padding:4px;
}
.slog-editor:empty:before{
    content: attr(placeholder);
    color:darkgrey;
}
.slog-editor:focus:before{
    content:none;
}
.slog_menu_a{
    color:#c6c6c6;
    cursor: pointer;
}
.slog_menu_a:hover{
    color:#c6c6c6;
}
section img{
    max-width:100%;
}
section table{
    max-width:100%;
}
section p,
section pre,
section table,
section figure,
section figcaption,
.blockquote-footer
{
    margin:0 0 0 0;
}
.slog_border{
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
}
.slog_border_focus{
    border: 1px solid #FF0000;
    border-radius: 4px;
    background-color: #f5f5f5;
}
.slog_border_right{
    border-right:1px dashed;
    border-color:blue;
}
div[data-language]::before {
    content: attr(data-language);
    color: black;
    background-color: #CFCFCF;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.6em;
    border-radius: 0 0 0 5px;
    padding: 0 0.7em;
    text-shadow: none;
}
.widget_editable_tag{
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
}
blockquote {
  background: #f9f9f9;
  border-left: 4px solid #ccc;
  padding: 0.5em 10px;
}
border-with-dash {
    border: 2px dashed;
    border-color: #c71717;
}
.textarea_with_highlight{
    border-radius: 6px;
    //font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    padding: 2px;
    tab-size: 4;
}
.textarea_with_highlight:empty:before{
        content: attr(placeholder);
        color:#CDC9C9;
    }
.textarea_with_highlight:focus:before{
    content:none;
}
.grid-crumbs {
    grid-area: crumbs
}

#ID_main_content_group{
    height: calc( 100% - var(--widget-tool-height) );
}

#ID_main_content_widget_tool{
    position:sticky;
    width:100%;
    height: var(--widget-tool-height);
    background-color: azure;
    bottom:0px;
}

#ID_main_content_up_arrow {
    position: sticky;
    bottom: 0px;
    z-index:-9999;
}

#ID_main_content_up_arrow div{
    position: relative;
    left: calc( 100% + 12px);
    bottom: 50px;
}

.slog_hide{
    /*display:none;*/
}

.slog_toc_h1{
    font-weight:900;
    font-size:1.1em;
}
.slog_toc_h2{
    font-weight:500;
    font-size:1em;
}
.slog_toc_h3{
    font-weight:300;
    font-size:0.9em;
}

.slog_font_red{
    color:#FF0000;
}

.slog_disable_a{
    pointer-events:none;
}

